Ext.require('Ext.tab.*');
Ext.onReady(function() {
	// 第一种方式创建
	var tabs = Ext.createWidget('tabpanel', {
				renderTo : 'tab',
				width : 450,
				activeTab : 0,
				margin : '50 10 50 80',
				defaults : {
					bodyPadding : 10
				},
				items : [{
							// contentEl:'script',//将指定容器中的内容加载到tabPanel的内容区
							title : 'Tabs-1',
							closable : true,
							html : 'Tabs-1内容。'
						}, {
							title : 'Tabs-2',
							closable : false,
							html : 'Tabs-2内容'
						}]
			});

	// 第二种方式创建
	var tabs2 = Ext.create('Ext.tab.Panel', {
		renderTo : document.body,
		activeTab : 0,
		width : 600,
		height : 250,
		plain : true,
		margin : '0 10 0 80',
		defaults : {
			autoScroll : true,
			bodyPadding : 10
		},
		items : [{
					title : 'Tabs-1',
					html : "这里显示内容",
					closable : true
				}, {
					title : '及时更新异步加载内容',
					loader : {
						url : 'data/ajax.html',
						contentType : 'html',
						loadMask : true
					},
					listeners : {
						activate : function(tab) {
							tab.loader.load();
						}
					}
				}, {
					title : '异步加载内容1',
					loader : {
						url : 'data/ajax1.html',
						contentType : 'html',
						autoLoad : true,
						params : 'foo=123&bar=abc'
					}
				}, {
					title : '点击触发事件',
					listeners : {
						activate : function(tab) {
							alert(tab.title);
						}
					},
					html : "点击Tab之后，触发事件，监听事件：activate。activate可传递两个参数。1、Ext.Component this。2、Object options "
				}, {
					title : 'Tabs不可能',
					disabled : true
				}]
	})
});
